<template>
    <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>

        <el-breadcrumb-item v-for="(item,index) in navigateList" :key="index" >{{item.title}}</el-breadcrumb-item>
    </el-breadcrumb>
</template>

<script>
export default {
    data() {
        return {
            navigateList:[]
        }
    },
    watch: {
        /**
         * 路由变化，更新面包屑导航
         *   侦听$route
         *   获取matced数组中元素，更新面包屑内容
         */
        $route(value){
            if(value.path === '/index'){
                this.navigateList = []
                return 
            }
            if(value.path.indexOf('orderDetail')){
                this.navigateList = []
                return 
            }
            // [{path:'/home1',title:'产品管理'},{path:'/product/list',title:'产品列表'},]
            // console.log(value.matched)
            const navigateList = value.matched.map(item=> {
                return {path:item.path,title:item.meta}
            })
            this.navigateList = navigateList
            // console.log(navigateList);
        }
    }
}
</script>

<style lang="scss" scoped></style>
